<template>
  <div class="channel">
    <van-cell :border="false">
      <div slot="title" class="title-text">我的频道</div>
      <van-button class="edit-btn" size="mini" round type="danger"
        @click="isdelete" plain>{{btnValue}}
      </van-button>
    </van-cell>
    <van-grid class='my-grid' :gutter="10">
      <van-grid-item class="grid-item aa text-color"
        @click="btnEdit(obj.id,index)" v-for="(obj,index) in list"
        :key="obj.id">
        <template slot="text">
          <van-icon v-show="isShow" name="close" class="aa" />
          <span class="text"
            :class="{textcolor:index==active}">{{obj.name}}</span>
        </template>

      </van-grid-item>
    </van-grid>
    <!-- 频道推荐 -->
    <van-cell :border="false">
      <div slot="title" class="title-text">频道推荐</div>
    </van-cell>
    <van-grid class='recommend-grid' :gutter="10">
      <van-grid-item class="grid-item" v-for="value in channels" :key="value.id"
        icon='plus' @click="onpush(value.name,value.id)">
        <span slot="text">{{value.name}}</span>
      </van-grid-item>
    </van-grid>
  </div>
</template>

<script>
import { EditChannelsAPI, channelsAPI, DeleteChannelAPI } from '@/api/user.js'

export default {
  props: {
    list: {
      type: Array,
      require: true
    },
    active: {
      type: Number,
      require: true
    }
  },
  data () {
    return {
      allchannels: [],
      btnValue: '编辑',
      isShow: false
    }
  },
  computed: {
    channels: {
      get () {
        const channels = []
        this.allchannels.forEach(channel => {
          const ret = this.list.find(obj => {
            return obj.id === channel.id
          })
          if (!ret) {
            channels.push(channel)
          }
        })
        return channels
      }
    }
  },
  async created () {
    const { data: { data: { channels } } } = await channelsAPI()
    this.allchannels = channels
  },
  methods: {
    async onpush (a, b) {
      await EditChannelsAPI({ id: b, seq: this.list.length })
      this.list.push({ name: a, id: b })
    },
    isdelete () {
      if (this.btnValue === '编辑') {
        this.btnValue = '删除'
        this.isShow = true
      } else {
        this.btnValue = '编辑'
        this.isShow = false
      }
    },
    // 删除我的频道
    async btnEdit (id, index) {
      if (this.isShow) {
        await DeleteChannelAPI(id)
        this.list.splice(this.list.findIndex((val, index) => {
          return val.id === id
        }), 1)
      } else {
        this.$emit('Editactive', index)
      }
    }
  }

}
</script>

<style scoped lang="less">
/deep/ .aa {
  .van-grid-item__content--center {
    i {
      position: absolute;
      left: 150px;
      top: -10px;
      color: #666;
    }
  }
}
.channel {
  padding: 85px 0;
  .van-grid-item__content {
    display: flex;
    justify-content: space-between;
  }
}
/deep/ .grid-item {
  width: 160px;
  height: 86px;
  .van-grid-item__content {
    white-space: nowrap;
    background-color: #f4f5f6;
    .van-grid-item__text {
      font-size: 28px;
      color: #222;
    }
  }
}

/deep/ .recommend-grid {
  .grid-item {
    .van-grid-item__content {
      flex-direction: row;
      .van-icon-plus {
        font-size: 28px;
        margin-right: 6px;
      }
      .van-grid-item__text .text {
        margin-top: 0;
      }
      span {
        font-size: 24px;
        color: #666;
      }
    }
  }
}
.textcolor {
  color: red;
}
</style>
